<!--
 * @Descripttion: 分配用户角色
 * @Author: YuZhenJing
 * @Date: 2020-01-12 12:01:01
 * @LastEditors  : YuZhenJing
 * @LastEditTime : 2020-01-21 14:31:30
 -->
<template>
  <div class="user-role">
    <tf-dialog
      :title="windowInfo.title"
      :title-icon="windowInfo.titleIcon"
      :visible.sync="tfVisible"
    >
      <template v-slot:content>
        <el-tabs
          v-model="activeName"
          type="border-card"
          @tab-click="handleClick"
        >
          <el-tab-pane label="执行角色" name="execute">
            <user-role-execute ref="userRoleExecuteRef"></user-role-execute>
          </el-tab-pane>
          <el-tab-pane label="管理角色" name="manager" v-if="showManagerTabs">
            <user-role-manager ref="userRoleManagerRef"></user-role-manager>
          </el-tab-pane>
        </el-tabs>
      </template>
      <template v-slot:footer>
        <el-row :gutter="12" style="padding:5px;">
          <el-col :span="24" style="text-align:center">
            <el-button
              :loading="saveLoading"
              @click="submitForm"
              icon="el-icon-circle-plus-outline"
              type="primary"
              >保存</el-button
            >
          </el-col>
        </el-row>
      </template>
    </tf-dialog>
  </div>
</template>
<script>
export default {
  components: {
    'tf-dialog': require('@/components/common/dialog/TfDialog').default,
    'user-role-execute': require('@/components/module/user/UserRoleExecute')
      .default,
    'user-role-manager': require('@/components/module/user/UserRoleManager')
      .default
  },
  data() {
    return {
      // 窗体信息
      windowInfo: {
        titleIcon: 'el-icon-s-operation',
        title: '分配角色信息'
      },
      saveLoading: false,
      tfVisible: false,
      activeName: 'execute',
      showManagerTabs: false,
      userId: ''
    }
  },
  methods: {
    show(userInfo) {
      if (userInfo && userInfo.accountType != '') {
        if (userInfo.accountType == 'sys_manager') {
          this.showManagerTabs = true
        }
        this.userId = userInfo.userId
        this.tfVisible = true
        this.$nextTick(() => {
          this.$refs.userRoleExecuteRef.loadExecute(this.userId)
        })
      } else {
        this.$alert('用户类别不能为空，无法设置角色', '提示', {
          type: 'warning',
          confirmButtonText: '确定'
        })
      }
    },
    handleClick() {
      if (this.activeName == 'execute') {
        this.$refs.userRoleExecuteRef.loadExecute(this.userId)
      } else {
        this.$refs.userRoleManagerRef.loadManager(this.userId)
      }
    },
    // 提交表单保存用户角色信息
    submitForm() {
      this.saveLoading = true
      let saveJoin = null
      if (this.activeName == 'execute') {
        saveJoin = this.$refs.userRoleExecuteRef.saveUserRole(this.userId)
      } else {
        saveJoin = this.$refs.userRoleManagerRef.saveUserRole(this.userId)
      }
      if (saveJoin != null) {
        saveJoin
          .then(data => {
            if (data.returnType == 'success') {
              this.saveLoading = false
              this.$notify({
                title: '成功',
                message: '保存成功',
                type: 'success'
              })
              this.tfVisible = false
            }
          })
          .catch(() => {
            this.saveLoading = false
            console.log('error:userRole/submitForm')
          })
      } else {
        console.log('error:userRole/submitForm saveJoin is null')
      }
    }
  }
}
</script>
